<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search" @reset="changeBiz">
						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择事业部"
								filterable
								@change="changeBiz"
								style="width: 160px"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="预约城市">
							<cl-select
								v-model="search.city_id"
								placeholder="请选择"
								filterable
								clearable
								style="width: 150px"
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in cityList"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="预约门店">
							<cl-select
								v-model="search.dept_id"
								:multiple-limit="10"
								placeholder="全部"
								filterable
								clearable
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.shop_childs"
									:key="item.dept_id"
									:label="item.dept_name"
									:value="item.dept_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								style="width: 140px"
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="排店部门">
							<cl-cascader
								clearable
								v-model="search.after_dept_id"
								:options="afterDeptList"
								:props="{
									value: 'dept_id',
									label: 'dept_name'
								}"
								filterable
								@change="changeDept"
							/>
						</cl-filter>
						<cl-filter label="排店人员">
							<cl-select
								v-model="search.order_user_id"
								placeholder="请选择"
								clearable
								style="width: 150px"
							>
								<el-option
									v-for="item in afterUserList"
									:key="item.user_id"
									:label="item.user_name"
									:value="item.user_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								value-format="yyyy-MM-dd"
								style="width: 150px"
								:clearable="false"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<cl-table-handle
						:print="printParams"
						:columns="initColumns"
						v-model="table.columns"
						@export-file="exportFile"
					/>
				</el-row>
			</template>
			<div style="height: 100%">
				<!-- 数据表格 -->
				<cl-table v-bind="table" id="collectLists" show-summary>
					<cl-empty slot="empty" />
					<template #column-customer="{ scope: { row } }">
						<cl-customer
							:gender="row.cus_sex"
							:name="row.cus_name"
							:cusId="row.cus_id + '' || '-'"
							:avatar="row.cus_img"
						/>
					</template>
					<template #column-order_date_id_user="{ scope: { row } }">
						{{ row.order_date_id_user ? row.order_date_id_user : "-" }}
					</template>
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<el-button
								type="primary"
								@click="getUserInfo(row)"
								:loading="row.loading"
							>
								客户详情
							</el-button>
							<el-button
								type="warning"
								@click="callPhone(row.cus_id)"
								:loading="row.loading"
							>
								拨打电话
							</el-button>
							<el-button type="warning" @click="addTrack(row)" :loading="row.loading">
								跟踪
							</el-button>
						</div>
					</template>
				</cl-table>
			</div>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<cl-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<add-track ref="addTrackRef" @refresh="refresh" />
		<make-call ref="makeCallRef" />
	</cl-crud>
</template>
<script>
import { exportExcel } from "@/utils/excel";
import { cloneDeep } from "cl-admin/utils";
import MakeCall from "./call-phone";
import addTrack from "./add-track";
import { delEmptyChildren } from "@/utils";
import dayjs from "dayjs";
export default {
	name: "NotArrived15",
	inject: ["$layout"],
	components: { addTrack, MakeCall },
	data() {
		return {
			printParams: {
				id: "collectLists",
				popTitle: "15天未到客户"
			},
			// 表格配置
			table: {
				id: "collectLists",
				"context-menu": ["refresh"],
				columns: []
			},
			initColumns: [
				{ label: "客户信息", prop: "customer", width: 200, showOverflowTooltip: true },
				{ label: "会员号", prop: "cus_id", minWidth: 80, showOverflowTooltip: true },
				{ label: "下定日期", prop: "deposit_time", minWidth: 80 },
				{ label: "所属事业部", prop: "biz_name", minWidth: 80 },
				{ label: "预约门店", prop: "shop_name", minWidth: 80 },
				{ label: "所属品牌", prop: "bra_name", minWidth: 80 },
				{
					label: "预约日期",
					prop: "appoint_time",
					minWidth: 80
				},
				{
					label: "预约人员",
					prop: "add_user_id",
					minWidth: 80
				},
				{ label: "排店人员", prop: "order_date_id_user", minWidth: 80 },
				{ label: "操作", prop: "opt", width: 270 }
			],
			search: {
				date: dayjs().format("YYYY-MM-DD"),
				biz_id: "",
				bra_id: [],
				dept_id: "", //所属
				city_id: "",
				after_dept_id: [],
				order_user_id: ""
			},
			//配置日期选择器的可选范围（只能选择今天之前的日期）
			pickerOptions: {
				disabledDate(time) {
					// const times = new Date(new Date().toLocaleDateString()).getTime() - 15 * 8.64e7 + 1
					// return time.getTime() > Date.now() || time.getTime() < times
					return time.getTime() > Date.now();
				}
			},
			cityList: [],
			afterDeptList: [],
			afterUserList: []
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
		this.table.columns = cloneDeep(this.initColumns);
	},
	methods: {
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.getBizRefCompany(biz_id);
			this.getCityList();
			this.getAfterDept();
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.deposit)
				.set("dict", {
					// 请求
					api: {
						page: "notArrivedList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		async onRefresh(params, { next, done, render }) {
			const { biz_id } = this.search;
			console.log(biz_id);
			let { list } = await next({
				...params,
				biz_id
			});
			render(list);
		},
		async getAfterDept() {
			const { biz_id } = this.search;
			this.afterDeptList = delEmptyChildren(
				(await this.$store.dispatch("common/getDept", {
					biz_id,
					post: 2,
					needAll: false,
					needCascader: true
				})) || []
			);
			console.log("this.afterDeptList", this.afterDeptList);
		},
		changeDept() {
			this.search.order_user_id = "";
			this.getManageDeptUser();
		},
		// 获取排店人员
		async getManageDeptUser() {
			const { after_dept_id, biz_id } = this.search;
			// if (Array.isArray(dept_id)) {
			// 	dept_id = dept_id.join();
			// }
			this.afterUserList = [];
			const data = await this.$service.user.deptuserlist({
				biz_id,
				dept_id: after_dept_id[1],
				post: 2
			});
			this.afterUserList = data;
		},
		refresh(reset = true) {
			let params = { ...this.params };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			this.load = true;
		},
		async getCityList() {
			const { biz_id } = this.search;
			this.$service.spread.getbizcitys({ biz_id }).then(data => {
				let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
				this.cityList = list;
			});
		},
		//新增跟踪
		addTrack(row) {
			this.$refs.addTrackRef.open(row);
		},
		//客户详情
		getUserInfo(row) {
			this.$layout.openCusDetail(row, "earnest");
		},
		//拨打电话
		callPhone(id) {
			this.$refs.makeCallRef.open(id);
		},
		changeBiz() {
			this.search = {
				...this.search,
				company_id: "",
				bra_id: [],
				dept_ids: []
			};
			// this.getCityList();
			this.init();
			this.refresh();
		},
		// 导出EXCEl
		exportFile() {
			exportExcel("#collectLists");
		}
	}
};
</script>
